<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
        }
        
        .box img {
            width: 1200px;
        }
        
        .nav {
            height: 40px;
            background-color: #678876;
        }
        
        .nav ol {
            display: flex;
            justify-content: space-around;
            line-height: 40px;
        }
        
        .nav ol li a {
            color: #ffffff;
        }
        
        .nav ol li a:hover {
            color: sandybrown;
            border-bottom: 1px sandybrown solid;
        }
    </style>
    <link rel="stylesheet" href="../css/pub.css">
</head>

<body>
    <div class="head">
        <div class="head-top">
            <div class="welcome">爱书的朋友们，欢迎来淘书！</div>
            <ul>
                <li>
                    <a href="../index.html">首页</a>
                    <a href="login.html">我的淘书</a>
                    <a href="car.html">购物车</a>
                    <a href="">帮助中心</a>
                    <a href="">400-8888-184</a>
                </li>
            </ul>
        </div>
    </div>
    <header class="header">
        <div class="w">
            <div class="logo"><img src="../static/img/taoshu-logo.jpg" alt=""></div>
            <div class="search">
                <input type="text" placeholder="请输入关键词" id="txt1"><input type="button" value="搜索" id="sea">
            </div>
        </div>
    </header>
    <nav class="nav">
        <div class="w">
            <ol>
                <li><a href="list.html">文学</a></li>
                <li><a href="list.html">小说</a></li>
                <li><a href="list.html">传记</a></li>
                <li><a href="list.html">艺术</a></li>
                <li><a href="list.html">收藏/鉴赏</a></li>
                <li><a href="list.html">经济管理</a></li>
                <li><a href="list.html">自我实现/励志</a></li>
                <li><a href="list.html">考试</a></li>
                <li><a href="list.html">青春文学</a></li>
                <li><a href="list.html">散文随笔</a></li>
            </ol>
        </div>
    </nav>
    <div class="w">
        <div class="box"><img src="../static/img/timg.jpg" alt=""></div>
    </div>
</body>

</html>